<!--
 * @Author: windys
 * @Description: 评论列表
 * @Date: 2022-02-19 13:55:45
-->
<template>
  <div class="commentlist_page">
    <div class="title">用户评论</div>
    <div class="item_commment" v-for="item in list" :key="item.commentId">
      <div class="left">
        <img :src="item.headUrl" alt="" srcset="" />
      </div>
      <div class="right">
        <div class="header">
          {{ item.commentName }}
          <van-icon v-if="item.vipStatus > 0" style="color:#ff9100" name="diamond" />
          <span class="font-size:10px;">{{ item.createDate }}</span>
        </div>
        <div class="you_say">
          {{ item.commentContent }}
        </div>
        <div class="replay" v-if="item.replyRsps && item.replyRsps.length">
          <span> 作者回复：</span>
          {{ item.replyRsps[0].repylContent }}
        </div>
      </div>
    </div>
  </div>

  <CommentText ref="CommentText" @handleSendText="handleSendText"></CommentText>
</template>

<script >
import { defineComponent, ref } from "vue";
export default defineComponent({
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["handleSendText"],
  setup(props, { emit }) {
    const handleSendText = (v) => {
      emit("handleSendText", v);
    };
    const CommentText = ref();
    const clear = () => {
      CommentText.value.clear();
    };
    return {
      clear,
      CommentText,
      handleSendText,
    };
  },
});
</script>





<style lang="scss" scoped>
.commentlist_page {
  margin: 20px;
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
  .title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .item_commment {
    display: flex;
    margin-top: 10px;
    .left {
      width: 50px;
      text-align: left;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
    }
    .right {
      width: calc(100% - 50px);
      font-size: 12px;
      border-bottom: 1px dotted #bebdbd;
      padding-bottom: 10px;
      .header {
        font-size: 14px;
        color: #525252;
        span {
          margin-left: 10px;
          font-size: 10px;
        }
      }
      .you_say {
        margin-top: 5px;
        color: #868282;
        word-break: break-all;
      }
      .replay {
        color: #868282;
        margin-top: 10px;
        span {
          color: #00a2ff;
        }
      }
    }
  }
}
</style>